<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
	<link rel="stylesheet" type="text/css" href="css/myStyle.css" />

</h:head>
<h:body>
	<ui:composition template="/template/layout.xhtml">
		<br />
		<br />
		<ui:define name="content">
			<h:form>
				<br />
				<br />
				<p:commandButton value="Agregar Maestro" onsuccess="dlg.show()"
					update="pickList" ajax="true" immediate="true"
					action="#{teacherMB.initDialog}" />
				<br />
				<br />
				<p:dataTable id="listaMaestros" var="teacher"
					value="#{teacherMB.teachers}" style="width:250px;"
					widgetVar="teacherTable"
					filteredValue="#{teacherMB.teachersFiltered}"
					emptyMessage="No se encontraron registros">
					<p:column id="nameColumn" headerText="Nombre"
						filterBy="#{teacher.name}" filterMatchMode="contains"
						sortBy="#{teacher.name}">
						<h:outputText value="#{teacher.name}" />
					</p:column>

					<p:column id="firstColumn" headerText="Primer Apellido"
						filterBy="#{teacher.firstName}" filterMatchMode="contains"
						sortBy="#{teacher.firstName}">
						<h:outputText value="#{teacher.firstName}" />
					</p:column>

					<p:column id="lastColumn" headerText="Segundo Apellido"
						filterBy="#{teacher.lastName}" filterMatchMode="contains"
						sortBy="#{teacher.lastName}">
						<h:outputText value="#{teacher.lastName}" />
					</p:column>

					<p:column id="coursesColumn" headerText="Cursos"
						filterBy="#{teacher.courses}" filterMatchMode="contains">
						<h:outputText value="#{teacher.courses}" />
					</p:column>
				</p:dataTable>
				<p:dialog id="teacherDialog" widgetVar="dlg" width="500px"
					maximizable="false" header="Nuevo Maestro">
					<h:panelGrid id="teacherPanel" columns="3">
						<p:outputLabel for="teacherName" value="Nombre" />
						<p:inputText id="teacherName" value="#{teacherMB.teacher.name}" />

						<p:outputLabel for="teacherFirstName" value="Primer Apellido" />
						<p:inputText id="teacherFirstName"
							value="#{teacherMB.teacher.firstName}" />

						<p:outputLabel for="teacherLastName" value="Segundo Apellido" />
						<p:inputText id="teacherLastName"
							value="#{teacherMB.teacher.lastName}" />
							
						<p:commandButton value="Guardar"/>
						<p:commandButton value="Limpiar" type="reset"/>
					</h:panelGrid>
					<p:fieldset legend="Cursos">
						<p:pickList id="pickList" value="#{teacherMB.courses}"
							var="course" itemLabel="#{course.name}" itemValue="#{course.id}">
						</p:pickList>
						<br/><br/>
					</p:fieldset>
				</p:dialog>
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>
</html>